<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网站标题</title>
	<link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">
	 <link rel="stylesheet" href="index.css">

</head>
<body>


<!-- 头部 -->
<header id="header">
<!-- <div class="container"> -->
	<div class="top-bar hidden-xs text-center text-muted">
		<div class="container">
			<div class="row">
				<div class="top-bar-1 col-md-3  col-sm-3">
					<a href="#" class="text-muted">
						
						<p><span class="glyphicon glyphicon-modal-window"></span>
							关注微信号<span class="caret"></span>
						</p>
						<!-- <img src="images/2.jpg" class="reservation"   style=" z-index: 2;width: 100px;height: 100px;"> -->
					</a>
				</div>
 
				<div class="top-bar-2 col-md-5 col-sm-5">
					<i class="glyphicon glyphicon-earphone"></i>
				    <span>联系电话：8888 8888</span>
				</div>

				<div class="top-bar-3 col-md-2 col-sm-2">
					<a href="#" class="text-muted">校企合作</a>
					<a href="" class="text-muted">培训师</a>
				</div>

				<div class="top-bar-4 col-md-3 col-sm-3" >
					<a href="" role="button" class="btn btn-sm text-muted btn-regist">免费注册
					</a>
					<a href="" role="button" class="text-muted" style="margin-left: 12px">
						立即登录
					</a>
				</div>
			</div>
		</div>
	</div>


<!-- 第二部分 -->
	

<nav class="navbar navbar-default navbar-stattic-top navbar-new1">
  <div class="container">
    
    <div class="navbar-header"  >
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">汉堡按钮</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
      	<img  style="width: 120px" src="images/logo.png">
      </a>
    </div> 



    <div class="collapse navbar-collapse div-new2" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active">
        	<a href="#">关于我们 <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">课程介绍 </a></li>
        <li><a href="#">热门课程 </a></li>
        <li><a href="#">名师授课 </a></li>
        <li><a href="#">课程互动 </a></li>
        <li><a href="#">联系我们 </a></li>
      </ul>

       <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">
       		 <li><a href="#">个人中心</a></li>
       </ul> 
      
    </div>

  </div>
</nav>

<!-- 第二部分，结束 -->


<!-- </div>	 -->



<!-- </div> -->
</header><!-- /头部 -->





<!-- 轮播图 -->
	<section id="carousel">
		
<div class="carousel slide" id="lunbo">

<!-- 圆点 -->
	<ol class="carousel-indicators">
		<li data-target="#lunbo" data-slide-to="0" class="active"> </li>
		<li data-target="#lunbo" data-slide-to="1"></li>
		<li data-target="#lunbo" data-slide-to="2"></li>
	</ol>

<!-- 图片 -->
	<div class="carousel-inner">
		<div  class="item active" data-sm-img='images/banner1_640_340.jpg' data-lg-img='images/banner1_2000_400.jpg '  >
		</div>

		<div class="item " data-sm-img='images/banner1_640_340.jpg' data-lg-img='images/banner1_2000_400.jpg '  >
		</div>

		<div class="item"  data-sm-img='images/banner1_640_340.jpg' data-lg-img='images/banner1_2000_400.jpg '  >
		</div>
	</div>

<!-- 上下张按钮 -->
	<a class="left carousel-control" href="#lunbo" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>

	<a href="#lunbo" class="right carousel-control" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>


</div>







	</section>
<!-- /轮播图 -->


<!-- 关于我们 -->
	<section id="about" class="hidden-xs hidden-sm"> 

<!-- 标题	 -->
<div class="title ">
	<h1 class="text-center"><strong>关于我们</strong></h1>
	<img src="images/bao.png" width="50px">
	<!-- <span class="glyphicon glyphicon-star" style="color: #000"></span>
	<span class="glyphicon glyphicon-star" style="color: #000"></span>
	<span class="glyphicon glyphicon-star" style="color: #000"></span> -->
</div>

<!-- 主要内容 -->
	<div class="row"> 
		<div class="col-md-8 " style="font-size: 25px;">
			<p  class="text-muted">这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落</p>
			<p class="text-muted"">这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落</p>
			<p class="text-muted";">这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落这是一个p标签文字段落</p>
		</div>
		<div class="col-md-4">
			<img src="images/banner3_640_340.jpg" style="width: 100%;height:320px;" class="img-rounded img-responsive">
		</div>
	</div>


	</section>
<!-- /关于我们 -->


<!-- 产品特色 -->
	<section id="product">
<div class="container">
	<div class="row">
	

<!-- 头部选项 -->
	<ul id="myTab" class="nav nav-tabs">
		<li class="active">
			<a href="#home" data-toggle="tab">在线大学</a>
		</li>
		<li>
			<a href="#ios" data-toggle="tab">会员专享</a>
		</li>

		<li class="dropdown">
			<a href="#java" data-toggle="tab">优质视频 </a>
		</li>

		<li class="pull-right hidden-xs hidden-sm" ><a href="#python" data-toggle="tab">更多</a></li>

	</ul>

<!-- 展示内容 -->
	<div id="myTabContent" class="tab-content">
		<div class="tab-pane fade in active" id="home">
			<div class="container">
				<div class="row">
					<div class="col-md-8">
					<!-- 第一部分 -->
						<div class="pd-one-1 media">
								<!-- 媒体对象左边，垂直居中 -->
								<a href="#" class="media-left media-bottom">
									<img src="images/tianzhidao.png" width="140" height="140">
								</a>

								<div class="media-body " >
									<h2 style="margin:30px 15px 10px 15px;" class="media-heading">欢迎来到XX学院</h2>
									<h2 class="media-heading">welcome to school</h2>
								</div>
						</div>
						<!-- 第二部分 -->
							<ol id="pd-one-2" class="breadcrumb lead">
								<li><a href="">HTML5+全栈</a></li>
								<li><a href="">HTML5+全栈</a></li>
								<li><a href="">HTML5+全栈</a></li>
								<li><a href="">HTML5+全栈</a></li>
							</ol>
		

						<!-- 第三部分 -->
							<h1 >欢迎来到IT人的在线大学 <strong>撩客学院</strong></h1>
						<!-- 第四部分 -->
							<div id="pd-one-4">
								<button class="btn btn-default btn-lg" role="button">课程咨询</button>
								<button class="btn btn-default btn-lg" role="button">了解更多</button>
							</div>
					</div>
					<div class="col-md-4 hidden-xs hidden-sm">
						<img src="images/简历.png"  class="img-responsive" >
					</div>
				</div>
			</div>
		</div>

		<!-- 标签面板第二块 -->
		<div class="tab-pane fade" id="ios">
			<div class="container">
				<div class="row">
					<div class="col-md-4 hidden-xs hidden-sm">
						<img src="images/简历.png" alt="" class="img-responsive">
					</div>
					<div class="col-md-7 col-md-offset-1 ">
						<h1 class="text-warning"> 撩客学院会员</h1>
						<p class="lead">汇聚名师，为你呈现前端、后端、移动端、大数据、人工智能等从零基础到项目实战连载课程内容。专属会员社群和私人定制服务，一年365天持续更新课程全部免费学习！</p>
					</div>

				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="java">
			<div class="container">
				<div class="row">
					<div class="col-md-7">
						<h1><strong class="text-danger">案例驱动：体系贯穿.全面系统</strong></h1>
						<h3>10-15分钟的视频<span class="text-warning"> 知识点拆分讲解</span> </h3>
						<h4 class="text-muted">玩转HTML5+全栈，玩转python+人中智能，玩转javaEE系列，玩转GO区块链系列</h4>
						<div class="badge" style="height: 30px;font-size:20px">已更新3000+视频 | 1W+人订阅</div>
					</div>

					<div class="col-md-5 hidden-xs hidden-sm">
						<img src="images/简历.png" style="height: 300px;width:100%" class="img-responsive">
					</div>
				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="python">
			<p>444444444444</p>
		</div>
	</div>










	</div>

</div>





	</section>
<!-- /产品特色 -->

<br><br>
<!-- 热门课程 -->
	<section id="hot">热门课程</section>
<!-- /热门课程 -->


<!-- 友情链接 -->
	<section id="footer">友情链接</section>
<!-- /友情链接 -->







<br>
	<p class="visible-xs">当前屏幕尺寸：xs</p>
	<p class="visible-sm">当前屏幕尺寸：sm</p>
	<p class="visible-md">当前屏幕尺寸：md</p>
	<p class="visible-lg">当前屏幕尺寸：lg</p>
<br><br>

<!-- 引入本地文件 bootstrap基于JQ上运行，需加载JQ文件-->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
<script src="index.js"></script>
	
</body>
</html>